<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">浏览记录</block>
		</cu-custom>
		
		<!-- 标题部分 begin -->
		<view class="cu-list menu sm-border">
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-time text-green"></text>
					<text class="text-black">历史记录</text>
				</view>
				<view class="action">
					<button class="cu-btn round bg-red sm shadow" @tap="removeHistory">删除</button>
				</view>
			</view>
		</view>
		<!-- 标题部分 end -->
		
		<!-- 历史信息部分 begin -->
		<!-- 列表部分 begin -->
		<view v-if="isInit" :style="'height:'+screenHeight+'px;'">
			<mescroll-uni ref="mescrollRef" :fixed="false" top="0" :bottom="0"  @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			
				<mescroll-empty v-if="history.length==0"></mescroll-empty>
					
					<view v-for="(item,index) in history" :key="index">
						<view class="padding" style="padding-bottom: 0;">
							{{item.key}}
						</view>
						<view class="cu-card case grid col-4 grid-square">
							
							<view class="cu-item shadow" v-for="(his,index1) in item.data" :key="index1" @tap="goDetail(his)">
								<view class="image">
									<image :src="his.img" style="height: 90px;"></image>
									<view class="cu-bar bg-shadeBottom" style="padding-left:15rpx;min-height: 60rpx;">
										<text class="text-cut text-sm">{{his.name}}</text>
									</view>
									<text class="cu-tag radius sm light" :class="his.scenery?'bg-red':'bg-green'">
										<text v-if="his.scenery">景区</text>
										<text v-else>特产</text>
									</text>
								</view>
							</view>
							
						</view>
					</view>				
			
			</mescroll-uni>
			<!-- 列表部分 end -->
			
		</view>
		<view class="cu-load load-modal" v-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
</template>

<script>
	import * as confirm from '@/common/confirm.js'
	
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 非uni_modules版本
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 非uni_modules版本
	
	export default {
		mixins: [MescrollMixin],
		components:{
		        MescrollBody
		},
		data() {
			return {
				//状态数据
				isInit:false,
				screenHeight:this.s_h_notb,
				upOption: {
					page: {
						size: 6 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无历史记录',
					},
					textNoMore:'-- 没有更多历史记录 --',
					toTop:{
						offset:200,
						bottom: '210rpx',
					}
				},
				history:[]
			}
		},
		onLoad() {
			setTimeout(()=>{
				this.isInit=true
			},500)
		},
		methods:{
			upCallback(page){
				
				let _this=this
				let pageNum = page.num; // 页码, 默认从1开始
				
				let params={
					"page":pageNum,
				}
				
				this.$api.post('/user/history',params).then(res => {
					let data=res.data;
					
					let _history=data.records
					let history=[]
					
					for (let key in _history) {
					  history.push({key:key,data:_history[key]})
					}
					
					let curPageData = history;
					let curPageLen=data.size;
					let totalSize=data.total;
					
					if(page.num == 1) _this.history = []; //如果是第一页需手动置空列表
					
					let size=_this.history.length
					let last=_this.history[size-1]
					if(last&&curPageData[0]&&last.key&&curPageData[0].key&&last.key==curPageData[0].key){
						let first=curPageData.pop(0)
						last.data.concat(first.data)
					}					
					
					this.$nextTick(()=>{
						_this.history = _this.history.concat(curPageData); //追加新数据
						_this.mescroll.endBySize(curPageLen, totalSize);
					})
				})
				
			},
			removeHistory(){
				confirm.choose("确定删除所有历史记录?",()=>{
					this.$api.post('/user/remove_history').then((res)=>{
						this.history=[]						
						this.$nextTick(()=>{
							this.mescroll.resetUpScroll();
						})
					})
				})		
			},
			goDetail(item){
				if(item.scenery){
					uni.navigateTo({
						url:"/pages/scenery/detail?id="+item.id
					})
				}else{
					uni.navigateTo({
						url:"/pages/goods/detail?id="+item.id
					})
				}
			},
		}
	};
</script>

<style>
</style>
